<template>
  <div class="repair-detail">
    <div class="info-block">
      <h2>报修单基本信息</h2>
      <el-form label-width="100px">
        <el-form-item label="单号">
          <el-input v-model="repair.repairNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="repair.repairAddress" readonly></el-input>
        </el-form-item>
        <el-form-item label="维修状态">
          <el-input v-model="repair.repairStatus" readonly></el-input>
        </el-form-item>
        <el-form-item label="报修人">
          <el-input v-model="repair.reporter" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repair.contactPhone" readonly></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="repair.repairType" readonly></el-input>
        </el-form-item>
        <el-form-item label="报修内容">
          <el-input v-model="repair.repairContent" type="textarea" readonly></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="info-block">
      <h2>报修图像</h2>
      <el-form :model="repair" label-width="100px">
        <el-form-item label="报修图像">
          <el-image v-for="img in repair.reportImages" :src="img" :key="img" style="margin: 5px" />
        </el-form-item>
      </el-form>
    </div>
    <div class="info-block">
      <h2>维修员信息</h2>
      <el-form :model="repair" label-width="120px">
        <el-form-item label="维修员1">
          <el-input v-model="repair.repairPerson1"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repair.repairPerson1Phone"></el-input>
        </el-form-item>
        <el-form-item label="维修员2">
          <el-input v-model="repair.repairPerson2"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repair.repairPerson2Phone"></el-input>
        </el-form-item>
        <el-form-item label="现有维修图像">
          <el-image v-for="img in repair.repairImages" :src="img" :key="img" style="margin: 5px" />
        </el-form-item>
        <el-form-item label="维修图像">
          <el-upload
            class="avatar-uploader"
            :action="$baseUrl + '/files/upload'"
            :headers="{ token: user.token }"
            list-type="picture"
            :on-success="handleAvatarSuccess"
          >
            <el-button type="primary">上传维修图像</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveRepairDetails">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 评价信息 -->
    <div class="info-block">
      <h2>评价信息</h2>
      <el-form :model="evaluationForm" label-width="100px">
        <el-form-item label="评分">
          <el-rate v-model="evaluationForm.rating" disabled></el-rate>
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input v-model="evaluationForm.comments" type="textarea" readonly></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkerRepairDetail",
  data() {
    return {
      repair: this.$route.params.repair || {},
      evaluationForm: {
        rating: 0,
        comments: '',
        id: this.$route.params.repair ? this.$route.params.repair.id : null
      },
      user: JSON.parse(localStorage.getItem('xm-user') || '{}')
    }
  },
  created() {
    if (this.$route.params.repair) {
      this.repair = this.$route.params.repair;
      this.evaluationForm.rating = this.repair.rating;
      this.evaluationForm.comments = this.repair.comments;
    }
  },
  methods: {
    saveRepairDetails() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$request.put('/worker/repair/update', this.repair).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
        })
    },
    handleAvatarSuccess(response, file, fileList) {
      // 把头像属性换成上传的图片的链接
      if (Array.isArray(this.repair.pictures)) {
        this.repair.pictures.push(response.data);
      } else {
        console.error('this.form.picture is not an array!');
        // 你可能需要在这里重置this.form.picture为一个数组
        this.repair.pictures = [response.data]; // 或者根据需要处理
      }
    },
  }
}
</script>

<style scoped>
/* 手机端表格滚动 */
@media (max-width: 767px) {
  .table {
    overflow-x: auto;
  }
}

.repair-detail {
  padding: 20px;
}

.info-block {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  padding: 15px;
  border-radius: 4px;
}

.info-block h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}
</style>